<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=UTF-8");
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String path = request.getContextPath();
%>
<html lang="zh-cn">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>   
    <link rel="stylesheet" href="<%=path %>/admin/css/pintuer.css">
    <link rel="stylesheet" href="<%=path %>/admin/css/admin.css">
    <script src="<%=path %>/admin/js/jquery-2.2.3.min.js"></script>
    <script src="<%=path %>/admin/js/pintuer.js"></script>  
		
</head>
<body>
  <div class="panel admin-panel">
  <div class="padding border-bottom">
        <div class="total">
            <h2>项目</h2>
            <ul>
                <li class="three">
                    <span>总数</span>
                    <span>已结束</span>
                    <span>进行中</span>
                </li>
                <li class="three" id="three">
                    <span></span>
                    <span></span>
                    <span></span>
                </li>
            </ul>
        </div>
        <div class="total">
            <h2>任务</h2>
            <ul>
                <li class="four">
                    <span>总数</span>
                    <span>进行中</span>
                    <span>已完成</span>
                    <span>逾期</span>
                </li>
                <li class="four" id="four">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </li>
            </ul>
        </div>
        <div class="total">
            <h2>项目</h2>
            <ul>
                <li class="two">
                    <span>总人数</span>
                    <span>活跃人数</span>
                </li>
                <li class="two" id ="two">
                    <span></span>
                    <span></span>
                </li>
            </ul>
            </div>
    </div>
  
    <div class="panel-head"><strong  id ="project" class="button button-little bg-gray">项目统计</strong>&nbsp;&nbsp;<strong  id ="emp" class="button button-little bg-white">成员统计</strong>
    <td colspan="7" style="text-align:left;padding-left:20px;"></div>
    <table class="table table-hover text-center">
    <div id="vos">
      <tr class="thead">
        <th style="width:10%">项目</th>
        <th style="width:10%">成员</th>
        <th style="width:20%">已完成任务数/总任务数</th>
        <th width="20%">进行中的任务数</th>
      </tr>
  </div>
     <volist name="list" id="vo"> 
              	<tr class="fir">
		          <td></td>
		          <td></td>
		          <td></td>
		          <td></td> 
		        </tr>	  
   		 </volist>
    </table>
  </div>
<script type="text/javascript" src="<%=path%>/admin/js/layer/layer.js" ></script>
<script type="text/javascript">
function  createProjectThead(){
	$("table").find(".thead").html("");
	var thead="";
	thead+="<th style='width:10%'>项目</th>"
	thead+="<th style='width:10%'>成员</th>"
	thead+="<th style='width:20%'>已完成任务数/总任务数</th>"
	thead+="<th width='20%'>进行中的任务数</th>"	
    $("table").find(".thead").html(thead);
}


function createEmpThead(){
	$("table").find(".thead").html("");
	var thead="";
	thead+="<th style='width:10%'>成员</th>"
	thead+="<th style='width:10%''>总任务数</th>"
	thead+="<th style='width:20%'>已完成任务数</th>"
	thead+="<th width='20%'>逾期任务数</th>"
	thead+="<th width='20%'>进行中的任务数</th>"
    $("table").find(".thead").html(thead);	
}

$(function(){
	$.ajax({
		url:"${pageContext.request.contextPath}/gathers/list",
		type:"get",
		data:"",
		datatype : "json",
		success:function(data){
			var obj = eval('(' + data + ')');
			$("#three").remove();
			$("#four").remove();
			$("#two").remove();
			var projHtmls = "";
			var taskHtmls="";
			var empHtmls="";
			projHtmls+='<li class="three" id="three">'
			+'<span>'+obj.projectSum+'</span>'
			+'<span>'+obj.finalProSum+'</span>'
			+'<span>'+obj.projectingSum+'</span>';
			taskHtmls+='<li class="four" id="four">'
				+'<span>'+obj.taskSum+'</span>'
				+'<span>'+obj.taskingSum+'</span>'
				+'<span>'+obj.completeTaskSum+'</span>'
				+'<span>'+obj.overTimeTaskSum+'</span>';
			empHtmls+='<li class="two" id="two">'
				+'<span>'+obj.employeeSum+'</span>'
				+'<span>'+obj.activeSum+'</span>';
			$(".three").after(projHtmls);
			$(".four").after(taskHtmls);
			$(".two").after(empHtmls);
			}
	});
	creatProjThead();
})

function creatProjThead(){
   $.ajax({
			url : "${pageContext.request.contextPath}/gathers/projectList",
			type : "get",
			data : "",
			datatype : "json",
			success : function(data) {
				createProjectThead();
				createProjectBody(data);
			}
		});
	}
	
	function createProjectBody(obj){
		$(".fir").remove();		
		var dataTBody="";
	    var tasking="";
		$.each($.parseJSON(obj),function(index,element){
			tasking =element.taskSum-element.taskedCount; 
			dataTBody+='<tr class="fir">'
			+ '<td>'+element.projName+'</td>'
			+ '<td>'+element.empCount+'</td>'
			+ '<td>'+element.taskedCount+'/'+element.taskSum+'</td>'
			+ '<td>'+element.taskSum+'-'+element.taskedCount+'-'+tasking+'</td>'
			+'</tr>'
		});
		 $(".thead").after(dataTBody);
	}
	function createEmpBody(obj){
		$(".fir").remove();		
		var dataTBody="";
		var tasking="";
		$.each($.parseJSON(obj),function(index,element){
			tasking=element.taskSum-element.overTimeTask-element.taskedSum;
			dataTBody+='<tr class="fir">'
			+ '<td>'+element.empName+'</td>'
			+ '<td>'+element.taskSum+'</td>'
			+ '<td>'+element.taskedSum+'</td>'
			+ '<td>'+element.overTimeTask+'</td>'
			+ '<td>'+element.taskedSum+'-'+tasking+'-'+element.overTimeTask+'</td>'
			+'</tr>'
		});
		 $(".thead").after(dataTBody);
	}

	$(document).on('click', '#project', function() {
		//this.style.display = 'none';
		$("#emp").removeClass("bg-gray").addClass("bg-white");
		$("#project").removeClass("bg-white").addClass("bg-gray");
		$.ajax({
			url : "${pageContext.request.contextPath}/gathers/projectList",
			data : {
			},
			type : "get",
			datatype : "json",
			success : function(data) {
				createProjectThead();
				createProjectBody(data);
				}			
		});
	});
	
	$(document).on('click', '#emp', function() {
		$("#emp").removeClass("bg-white").addClass("bg-gray");
		$("#project").removeClass("bg-gray").addClass("bg-white");
		$.ajax({
			url : "${pageContext.request.contextPath}/gathers/empList",
			data : {
			},
			type : "get",
			datatype : "json",
			success : function(data) {
				createEmpThead();
				createEmpBody(data);
				}			
		});
	});	
</script>
</body>
</html>